<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>开发</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        header {
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            height: 50px;
        }

        header>div:nth-child(1) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            height: 30px;
            width: 50px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="login-content">
        <header>
            <div onclick="enterLoginPage()">登录</div>
        </header>
        {{musicList}}
    </div>
</body>

</html>
<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script>
    apiready = function() {
        getMusicList();
        var vm = new Vue({
            el: '#login-content',
            data: {
              musicList: []
            },
        })

        function getMusicList() {
            api.ajax({
                url: 'http://101.200.59.195:3000/personalized/newsong',
                method: 'get',
            }, function(ret, err) {
                if (ret) {
                  vm.musicList = ret
                } else {
                    alert(JSON.stringify(err));
                }
            });

        }

        function enterLoginPage() {
            api.openWin({
                name: 'login',
                url: './login.html',
                pageParam: {
                    name: 'login'
                }
            });

        }
    }
</script>
